<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
<h1>WebSocket Example</h1>
<div id="messages"></div>
<input type="text" id="message-input" placeholder="Enter message">
<button onclick="sendMessage()">Send</button>

<script>
    var socket;

    function connect() {
        var sessionId = 'test1'; // 替换为实际的会话ID
        socket = new WebSocket("ws://localhost:7070/ws/" + sessionId);

        socket.onopen = function() {
            appendMessage("Connected to WebSocket server.");
        };

        socket.onmessage = function(event) {
            appendMessage("Received message: " + event.data);
        };

        socket.onclose = function() {
            appendMessage("WebSocket connection closed.");
        };
    }

    function sendMessage() {
        var messageInput = document.getElementById("message-input");
        var message = messageInput.value.trim();
        if (message !== "") {
            socket.send(message);
            messageInput.value = "";
            appendMessage("Sent message: " + message);
        }
    }

    function appendMessage(message) {
        var messagesDiv = document.getElementById("messages");
        var messageElement = document.createElement("div");
        messageElement.textContent = message;
        messagesDiv.appendChild(messageElement);
    }

    connect();
</script>
</body>
</html>